{% extends "model/base.html" %}
{% block title %}数据可视化{% endblock %}
{% block StyleSheet %}

{% endblock %}
{% block script %}
    <!-- ChartJS -->
<script src="/static/plugins/chart.js/Chart.min.js"></script>
    <script>
  $(function () {
    /* ChartJS
     * -------
     * 在这里，我们将使用 ChartJS 创建一些图表
     */

    //--------------
    //- 区域图 -
    //--------------

    // 使用 jQuery 获取上下文 - 使用 jQuery 的.get() 方法。
    var areaChartCanvas = $('#areaChart').get(0).getContext('2d')

    var areaChartData = {
      labels  : ['{{ week_data.6.day }}', '{{ week_data.5.day }}', '{{ week_data.4.day }}', '{{ week_data.3.day }}','{{ week_data.2.day }}', '{{ week_data.1.day }}', '{{ week_data.0.day }}'],
      datasets: [
        {
          label               : '借阅量',
          backgroundColor     : 'rgba(59,229,223,0.9)',
          borderColor         : 'rgba(59,229,223,0.9)',
          pointRadius          : false,
          pointColor          : '#3b8bba',

          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : [ parseInt('{{ week_data.6.data }}'),parseInt('{{ week_data.5.data }}'), parseInt('{{ week_data.4.data }}'), parseInt('{{ week_data.3.data }}'), parseInt('{{ week_data.2.data }}'),parseInt('{{ week_data.1.data }}'), parseInt('{{ week_data.0.data }}')]
        }
      ]
    }

    var areaChartOptions = {
      maintainAspectRatio : false,
      responsive : true,
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          gridLines : {
            display : false,
          }
        }],
        yAxes: [{
          gridLines : {
            display : false,
          },
        }]
      }
    }

    // 这将获取 jQuery 集合中第一个返回的节点。
    var areaChart       = new Chart(areaChartCanvas, {
      type: 'line',
      data: areaChartData,
      options: areaChartOptions
    })

    //-------------
    //- 折线图 -
    //--------------
      var LinearData = {
      labels  : [ '{{ month_data.5.month }}', '{{ month_data.4.month }}', '{{ month_data.3.month }}','{{ month_data.2.month }}', '{{ month_data.1.month }}', '{{ month_data.0.month }}'],
      datasets: [
        {
          label               : '借阅量',
          backgroundColor     : 'rgba(60,141,188,0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : [ parseInt('{{ month_data.5.data }}'), parseInt('{{ month_data.4.data }}'), parseInt('{{ month_data.3.data }}'), parseInt('{{ month_data.2.data }}'),parseInt('{{ month_data.1.data }}'), parseInt('{{ month_data.0.data }}')]
        }
      ]
    }
    var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
    var lineChartOptions = jQuery.extend(true, {}, areaChartOptions)
    var lineChartData = jQuery.extend(true, {}, LinearData)
    lineChartData.datasets[0].fill = false;
    lineChartOptions.datasetFill = false

    var lineChart = new Chart(lineChartCanvas, {
      type: 'line',
      data: lineChartData,
      options: lineChartOptions
    })

    //-------------
    //- 环形图 -
    //-------------
    // 使用 jQuery 获取上下文 - 使用 jQuery 的.get() 方法。
    var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
    var donutData        = {
      labels: [
          {% for data in cate_data %}
          '{{ data.cate }}',
          {% endfor %}
      ],
      datasets: [
        {
          data: [
              {% for data in cate_data %}
                {{ data.data }},
          {% endfor %}
          ],
         backgroundColor : ['#f56954', '#00a65a', '#ef5b9c',
              '#f391a9', '#c92405', '#b36e7e', '#72baa7', '#f3704b', '#4e72b8', '#50b7c1',
              '#7bbfea', '#0876ba', '#00a6ac','#6f599c','#77ac98','#f58220','#ffc20e',
              '#0cdb2e', '#e75455'
              ,'#f39c12', '#016c86', '#3c8dbc', '#d2d6de', '#90d7ec', '#b7ba6b'],
        }
      ]
    }
    var donutOptions     = {
      maintainAspectRatio : false,
      responsive : true,
    }
    // 创建饼形图或环形图
    // 你可以使用以下方法在饼形图和环形图之间进行切换。
    var donutChart = new Chart(donutChartCanvas, {
      type: 'doughnut',
      data: donutData,
      options: donutOptions
    })

     var pieData      = {
      labels: [
          {% for data in school_data %}
          '{{ data.school }}',
          {% endfor %}
      ],
      datasets: [
        {
          data: [
              {% for data in school_data %}
                {{ data.data }},
          {% endfor %}
          ],
          backgroundColor : ['#f56954', '#00a65a', '#ef5b9c',
              '#f391a9', '#c92405', '#b36e7e', '#72baa7', '#f3704b', '#4e72b8', '#50b7c1',
              '#7bbfea', '#0876ba', '#00a6ac','#6f599c','#77ac98','#f58220','#ffc20e',
              '#0cdb2e', '#e75455'
              ,'#f39c12', '#016c86', '#3c8dbc', '#d2d6de', '#90d7ec', '#b7ba6b'],
        }
      ]
    }
    var pieChartCanvas = $('#pieChart').get(0).getContext('2d')

    var pieOptions     = {
      maintainAspectRatio : false,
      responsive : true,
    }
    // 创建饼形图或环形图
    // 你可以使用以下方法在饼形图和环形图之间进行切换。
    var pieChart = new Chart(pieChartCanvas, {
      type: 'pie',
      data: pieData,
      options: pieOptions
    })


  })
</script>
{% endblock %}
{% block content %}
    <div class="col-md-12">
         <div class="card card-primary ">
              <div class="card-header">
                <h3 class="card-title">最近一周借阅量</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                </div>
              </div>
              <div class="card-body">
                <div class="chart">
                  <canvas id="areaChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
    </div>
    <div class="col-md-12">
     <div class="card card-info">
              <div class="card-header">
                <h3 class="card-title">最近半年借阅量</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                </div>
              </div>
              <div class="card-body">
                <div class="chart">
                  <canvas id="lineChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
    </div>
    <div class="row">
          <div class="col-md-6">
            <!-- 区域图 -->

            <!-- /.card -->

            <!-- 环形图 -->
            <div class="card card-danger">
              <div class="card-header gradient-color-her">
                <h3 class="card-title">各类书籍借阅比例</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                </div>
              </div>
              <div class="card-body" style="min-height: 500px">
                <canvas id="donutChart" style="min-height: 500px; height: 500px; max-height: 500px; max-width: 100%;"></canvas>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->


            <!-- /.card -->

          </div>
             <div class="col-md-6">
             <!-- 饼形图 -->
            <div class="card card-danger">
              <div class="card-header gradient-color-ver">
                <h3 class="card-title">各学院借阅比例</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                </div>
              </div>
              <div class="card-body">
                <canvas id="pieChart" style="min-height: 500px; height: 500px; max-height: 500px; max-width: 100%;"></canvas>
              </div>
              <!-- /.card-body -->
            </div>
             </div>
    </div>
{% endblock %}
